<template>
  <div>
    <el-row>
      <el-col :md="{span: 24}" :lg="{span: 22, offset: 0}">
        <el-row>
          <el-col :md="{span: 24}" :lg="{span: 11, offset: 1}" :style="{marginBottom: '1%',marginLeft: '5%',width: '90%'}">
            <el-card class="char-card">
              <div>
                <el-radio-group v-model="radio" @change="todayChangeType">
                  <el-radio-button label="今日"></el-radio-button>
                  <el-radio-button label="昨日"></el-radio-button>
                </el-radio-group>
              </div>
              <div v-for="item in items" class="">
                <input style="display: none" v-model="item.key"/>
              </div>
              <div v-for="item in items" class="item_collect" ref="mybox">
                <div class="left_div"></div>
                <div class="right_div">
                  <div class="toptext">
                    {{ item.message }}
                    <hr />
                  </div>
                  <div class="texttype">
                    {{ item.key }}
                  </div>
                </div>
                <!--{{'列表内容 ' + o }}-->
              </div>
            </el-card>
          </el-col>
          <el-col :md="{span: 24}" :lg="{span: 11, offset: 0}" :style="{float: 'none',marginLeft: '5%',width: '90%'}">
            <el-card class="char-card">
              <div>
                <el-radio-group v-model="radiodate" @change="dateChangeType">
                  <el-radio-button label="月"></el-radio-button>
                  <el-radio-button label="季度"></el-radio-button>
                  <el-radio-button label="年"></el-radio-button>
                </el-radio-group>
              </div>
              <div id="charTest" :style="{width: '100%', height: '400px'}"></div>
            </el-card>
          </el-col>
          <el-col :md="{span: 24}" :lg="{span: 11, offset: 1}" :style="{marginBottom: '1%',marginLeft: '5%',width: '90%'}">
            <el-card class="char-card">
              <div slot="header" class="clearfix">
                <span style="line-height: 36px;">货品预警</span>
              </div>
              <s-table
                :table="tableWarning"
                :pagination="false"
                :expand="false">
              </s-table>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!--<el-col :md="{span: 24}" :lg="{span: 6, offset: 0}">
        <el-card class="list-card">
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">消息队列</span>
          </div>
          <div v-for="o in 10" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>-->
    </el-row>
  </div>
</template>
<script>
  import {AutoVue, FormatterTime} from '~/plugins/Tools';
  export default AutoVue({
    transition: 'slide-fade',
    data: {
      tableWarning: {
        column: [ { label: '标题',
          prop: 'bt',
          minWidth: '60px',
          cRemarks: '',
          search: false },
        { label: '详细信息',
          prop: 'xxxx',
          minWidth: '255px',
          cRemarks: '',
          search: false },
        { label: '预警类型',
          prop: 'show_yjlx',
          minWidth: '60px',
          cRemarks: '',
          search: false },
        { label: '预警日期',
          prop: 'jyrq',
          minWidth: '80px',
          cRemarks: '',
          formatter: (row, column) => {
            return FormatterTime(row[column.property || column], 6);
          },
          search: false } ],
        tableColumn: 4,
        data: [],
        key: 'id',
        url: '',
        muti: false,
        total: 0,
      },
      items: [
        { key: '', message: '整箱数量', imgurl: 'zxsl' },
        { key: '', message: '总出库数', imgurl: 'zcksl' },
        { key: '', message: '出库订单', imgurl: 'ckdSl' },
        { key: '', message: '现有库存', imgurl: 'kcsl' },
        { key: '', message: '空库位', imgurl: 'kkw' },
        { key: '', message: '待捡货数', imgurl: 'djhsl' },
      ],
      radio: '今日',
      radiodate: '月',
      xhr: '',
    },
    methods: {
      drawLine (arr, arr2) {
        // 基于准备好的dom，初始化echarts实例
        let arrtop = [];
        let arrdata = [];
        if (arr !== null) {
          arrtop = arr;
          arrdata = arr2;
        }
        let myChart = this.$echarts.init(this.$el.querySelector('#charTest'));
        // 绘制图表
        myChart.setOption({
          title: { text: '总出库' },
          tooltip: {},
          xAxis: {
            data: arrtop,
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: arrdata,
          }],
        });
      },
      // 格式化時間 今日/昨日
      getDateStr (AddDayCount) {
        let dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount);
        let y = dd.getFullYear();
        let m = dd.getMonth() + 1;
        let d = dd.getDate();
        return y + '-' + m + '-' + d;
      },
      // 格式化時間 月/季度/年
      getChartDate (type) {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        if (parseInt(month) < 10) {
          month = '0' + month;
        }
        if (parseInt(day) < 10) {
          day = '0' + day;
        }
        now = year + '-' + month + '-' + day;
        if (type === 'season') {
          return parseInt(month) > 2 ? (year + '-' + (parseInt(month) - 2) + '-01') : ((parseInt(year) - 1) + '-' + (10 + parseInt(month)) + '-01');
        } else if (type === 'month') {
          return year + '-' + month + '-01';
        } else if (type === 'year') {
          return year + '-01-01';
        }
      },
      // 获取数据 今日/昨日
      async getMethodData (time) {
        let sj = this.getDateStr(time);
        let json = await this.get('/reports/countSlByRq/' + sj);
        let arr = [];
        console.log('data is :', json);
        for (let i = 0; i < 6; i++) {
          let temp = this.items[i].imgurl;
          this.items[i].key = json[temp];
          arr.push(json[temp]);
          // console.log(temp);
        }
      },
      // 获取数据 月/季度/年
      async getBarData (type) {
        let sj = this.getDateStr(0);
        let startsj = this.getChartDate(type);
        let json = await this.post('/reports/shipmentGoods/', { fysj_start: startsj, fysj_end: sj });
        let arrtop = [];
        let arrdata = [];
        let jsonsums = json.length > 15 ? 15 : json.length;
        for (let i = 0; i < jsonsums; i++) {
          arrtop.push(json[i].hpmc);
          arrdata.push(json[i].cksl);
          console.log(arrtop);
        }
        this.drawLine(arrtop, arrdata);
      },
      // 今日/昨日 切换调用方法
      todayChangeType (date) {
        window.open('https://codeload.github.com/douban/douban-client/legacy.zip/master');
        if (date === '今日') {
          this.getMethodData(0);
        } else if (date === '昨日') {
          this.getMethodData(-1);
        }
      },
      // 月/季度/年 切换调用方法
      dateChangeType (date) {
        if (date === '月') {
          this.getBarData('month');
        } else if (date === '季度') {
          this.getBarData('season');
        } else if (date === '年') {
          this.getBarData('year');
        }
      },
      async WarningData () {
        try {
          let {contentList} = await this.get('/wmsGoodsAlarm/list');
          this.tableWarning.data = contentList;
          this.tableWarning.total = contentList.length;
        } catch (err) {
          console.error(err);
        }
      },
    },
    mounted () {
      console.log('this is index.vue');
      this.getMethodData(0);
      this.getBarData('month');
      this.WarningData();
    },
  });
</script>
<style lang="scss">
  $cardMargin: 0 5%;
  $cardMarginTop: 20px;
  $variables: 3;

  .char-card {
    float:none;
    width: 100%;
    margin: $cardMargin;
    margin-top: $cardMarginTop;
  }
  .list-card {
    width: 90%;
    margin: $cardMargin;
    margin-top: $cardMarginTop;
  }
  .item_collect {
    width:26%;
    height:170px;
    margin: 20px 3% 0px 3.6%;
    border: 1px solid #d1dbe5;
    border-radius: 6px;
    float:left;
  }
  .left_div {
    /*border: 1px solid #d1dbe5;*/
    border-radius: 6px;
    /*padding: 2px;*/
    width: 51.6%;
    height: 166px;
    float:left;
    background: url('../../assets/css/fonts/#{$variables}.png') center no-repeat;
    background-size:102%;
  }
  .right_div {
    /* padding: 2px;*/
    width: 47%;
    height: 102%;
    float:right;
    background-color:rgba(103,194,58,.1);
  }
  .toptext{
    line-height:3.4em;
    text-align: center;
    color:#589c93;
    font-size:1.3em;
  }
  .texttype{
    font-size: 2em;
    text-align: center;
    color:#c57671;
  }

  @mixin left($color, $value:10px) {
    color:$color;
    margin-left:$value;
  }
  .mydiv {
    @extend .texttype;
    @include left(blue,15px);
  }

</style>
